<template>
  <el-container id="VisualPositionSalaryBarCharts" ref="chart">
  </el-container>
</template>

<script>

export default {
  name: "VisualPositionSalaryBarCharts",
  data() {
    return {
      valueDatas:[],
      labelDatas:[],
    }
  },
  methods: {
    initCharts() {
      let chartDom = document.getElementById('VisualPositionSalaryBarCharts');
      let myChart = this.$echarts.init(chartDom);
      let barHeight = 50
      const valueDatas = this.valueDatas;

      const labelDatas = this.labelDatas
      let options = {
        title: {
          text: '',
          subtext: ''
        },
        legend: {
          show: true,
          top: 'bottom',
          data: ['Range', 'Average']
        },
        grid: {
          top: 100
        },
        angleAxis: {
          type: 'category',
          data: labelDatas
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            const id = params.dataIndex;
            return (
                labelDatas[id] +
                '<br>最低薪资：' +
                valueDatas[id][0] +
                '<br>最高薪资：' +
                valueDatas[id][1] +
                '<br>平均薪资：' +
                valueDatas[id][2]
            );
          }
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: 'transparent'
            },
            data: valueDatas.map(function (d) {
              return d[0];
            }),
            coordinateSystem: 'polar',
            stack: 'Min Max',
            silent: true
          },
          {
            type: 'bar',
            data: valueDatas.map(function (d) {
              return d[1] - d[0];
            }),
            coordinateSystem: 'polar',
            name: 'Range',
            stack: 'Min Max'
          },
          {
            type: 'bar',
            itemStyle: {
              color: 'transparent'
            },
            data: valueDatas.map(function (d) {
              return d[2] - barHeight;
            }),
            coordinateSystem: 'polar',
            stack: 'Average',
            silent: true,
            z: 10
          },
          {
            type: 'bar',
            data: valueDatas.map(function (d) {
              return barHeight * 2;
            }),
            coordinateSystem: 'polar',
            name: 'Average',
            stack: 'Average',
            barGap: '-100%',
            z: 10
          }
        ]
      };

      options && myChart.setOption(options);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.$api.getPositionSalaryDistribution().then(rep => {
      console.log(rep)
      this.valueDatas = rep.data.map(item=>[item.min_salary,item.max_salary,item.avg_salary])
      this.labelDatas = rep.data.map(item=>item.label)
      this.initCharts()
    }).finally(

    )

  },
}
</script>

<style scoped>
#VisualPositionSalaryBarCharts {
  width: 100%;
  height: 85vh;
}
</style>